<template>
  <div class="number-range-select">
    <a-input-group compact class="input-group">
      <a-input-number v-model:value="editValue.min.value" />
      <a-select v-model:value="editValue.min.type">
        <a-select-option
          v-for="(operatorValue, operatorKey) in leftOperators"
          :key="operatorValue"
          :value="operatorValue"
        >
          {{ operatorKey }}
        </a-select-option>
      </a-select>
    </a-input-group>
    <span class="value-label">{{ t('value') }}</span>
    <a-input-group compact class="input-group">
      <a-select v-model:value="editValue.max.type">
        <a-select-option
          v-for="(operatorValue, operatorKey) in rightOperators"
          :key="operatorValue"
          :value="operatorValue"
        >
          {{ operatorKey }}
        </a-select-option>
      </a-select>
      <a-input-number v-model:value="editValue.max.value" />
    </a-input-group>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue'
  import { useI18n } from 'vue-i18n'

  export default defineComponent({
    props: {
      value: {
        type: Object,
        default: () => ({
          min: { type: 'GT', value: undefined },
          max: { type: 'LT', value: undefined }
        })
      }
    },
    setup(props) {
      const { t } = useI18n()

      const leftOperators = { '<': 'GT', '<=': 'GE' }
      const rightOperators = { '<': 'LT', '<=': 'LE' }

      const editValue = ref()

      watch(
        () => props.value,
        () => {
          if (editValue.value !== props.value) {
            editValue.value = props.value
          }
        },
        {
          immediate: true
        }
      )

      // 暴露给外部组件，用于验证
      function validate() {
        const { min, max } = editValue.value
        if ((min.value !== 0 && !min.value) || (max.value !== 0 && !max.value)) {
          return Promise.reject(t('placeholderInput'))
        }
        if (min.value >= max.value) {
          return Promise.reject(t('minGreaterThanMax'))
        }
        return Promise.resolve(true)
      }

      return {
        leftOperators,
        rightOperators,
        editValue,

        t,
        validate
      }
    }
  })
</script>

<style lang="less" scoped>
  .number-range-select {
    display: flex;
    align-items: center;

    .input-group {
      display: flex;
    }

    .value-label {
      margin: 0 5px 0 5px;
    }
  }
</style>

<i18n>
zh-CN:
  value: '值'
  minGreaterThanMax: '左值要小于右值'
</i18n>
